<template>
  <div class="container">
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 面包屑导航 -->
      <el-breadcrumb>
        <el-breadcrumb-item >学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>大数据</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- /面包屑导航 -->
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- /分割线 -->
      <!-- 搜索框 -->
      <el-form :inline="true" :model="queryList" class="demo-form-inline">
        <el-form-item label="目录名称">
          <el-input
            v-model="queryList.directoryName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryList.state" placeholder="请选择">
            <el-option label="已启用" value="1"></el-option>
            <el-option label="已禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" class="colInput" plain @click="kong"
            >清除</el-button
          >
          <el-button
            size="small"
            class="colInput"
            type="primary"
            @click="shouSuo"
            >搜索</el-button
          >
        </el-form-item>
        <!-- <el-button
          class="colright fr"
          size="small"
          style="margin-left: 10px"
          type="text"
          icon="el-icon-back"
          @click="$router.back()"
          >123</el-button
        > -->
        <el-button
          class="filter-item fr"
          size="small"
          style="margin-left: 10px"
          type="success"
          icon="el-icon-edit"
          @click="addDialogVisible = true"
          >新增用户</el-button
        >
        <!-- /搜索框 -->
      </el-form>
      <!-- 列表数据 -->
      <el-alert type="info" show-icon> 数据一共{{ total }}条</el-alert>
      <el-table :data="list" height="450" border style="width: 100%">
        <el-table-column type="index" label="💔"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="180">
        </el-table-column>
        <el-table-column prop="directoryName" label="目录名称" width="180">
        </el-table-column>
        <el-table-column prop="creator" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template v-slot="scope">
            {{ scope.row.addDate | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量"> </el-table-column>
        <el-table-column label="状态">
          <template v-slot="scope"
            >{{ scope.row.state === 0 ? '已禁止' : '已启用' }}
          </template></el-table-column
        >
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="editState(scope.row)">{{
              scope.row.state === 1 ? '禁用' : '启用'
            }}</el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="editDirectorys(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="removeDir(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- /列表数据 -->
      <!-- 页面码 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryList.page"
        :page-sizes="[8, 12, 16, 20]"
        :page-size="queryList.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- /页面码 -->
      <!-- 添加目录弹框 -->
      <el-dialog
        title="新增目录"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialog"
      >
        <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addFormRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="学科名称">
            <el-select v-model="addForm.value" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in addFrom"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="elform" label="目录名称" prop="directoryName">
            <el-input v-model="addForm.directoryName"></el-input> </el-form-item
        ></el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addQueDing">确 定</el-button>
        </span>
      </el-dialog>
      <!-- /添加目录弹框 -->
      <!-- 修改目录弹框 -->
      <el-dialog title="修改目录" :visible.sync="addDialogVisibles" width="50%">
        <el-form
          :model="editList"
          :rules="editListRules"
          ref="editListRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="学科名称">
            <el-select v-model="editList.subjectID" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in addFrom"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="elform" label="目录名称" prop="directoryName">
            <el-input
              v-model="editList.directoryName"
            ></el-input> </el-form-item
        ></el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisibles = false">取 消</el-button>
          <el-button type="primary" @click="editListForm">确 定</el-button>
        </span>
      </el-dialog>
      <!-- /修改目录弹框 -->
    </el-card>
    <!-- 卡片视图 -->
  </div>
</template>

<script>
import {
  list,
  add,
  detail,
  remove,
  update,
  changeState
} from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  name: 'Directorys',
  props: {},
  data() {
    return {
      // 请求列表数据
      queryList: {
        directoryName: '',
        state: null,
        page: 1,
        pagesize: 8
      },
      // 返回的列表参数
      list: [],
      // 总的条数
      total: 0,
      // 控制添加添加目录弹框
      addDialogVisible: false,
      // 添加目录的表单数据
      addForm: {
        directoryName: '',
        value: ''
      },
      // 添加表单验证规则
      addFormRules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ]
      },
      // 控制修改目录弹框
      addDialogVisibles: false,
      // 查询到的用户信息
      editList: {},
      // 添加表单验证规则
      editListRules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ]
      },
      // 学科数据
      addFrom: []
    }
  },
  components: {},
  watch: {},
  created() {
    this.getList()
    this.getAddFrom()
  },
  mounted() {},
  methods: {
    // 获取列表数据
    async getList() {
      try {
        const { data } = await list(this.queryList)
        this.list = data.items
        this.total = data.counts
      } catch (err) {
        this.$message.error('获取列表数据失败')
      }
    },
    // 监听pagesize改变的事件
    handleSizeChange(newsize) {
      this.queryList.pagesize = newsize
      this.getList()
    },
    // 监听页码值的改变
    handleCurrentChange(newpage) {
      this.queryList.page = newpage
      this.getList()
    },
    // 清空搜索框内容
    kong() {
      this.queryList.directoryName = ''
      this.queryList.state = null
      this.getList()
    },
    // 搜索列表内容
    shouSuo() {
      this.queryList.page = 1
      this.getList(this.queryList)
    },
    // 监听对话框关闭
    addDialog() {
      this.$refs.addFormRef.resetFields()
    },
    // 获取学科简单列表
    async getAddFrom() {
      try {
        const { data } = await simple()
        this.addFrom = data
      } catch (err) {
        this.$message.error('获取学科数据失败')
      }
    },
    // 添加目录
    async addQueDing() {
      // 对表单进行校验
      this.$refs.addFormRef.validate((valid) => {
        console.log(valid)
      })
      try {
        await add({
          subjectID: this.addForm.value,
          directoryName: this.addForm.directoryName
        })
        this.$message.success('新增目录成功')
        this.addDialogVisible = false
        this.getList()
      } catch (err) {
        this.$message.error('添加目录失败')
      }
    },
    // 展示修改目录对话框
    async editDirectorys(row) {
      this.addDialogVisibles = true
      try {
        const { data } = await detail(row)
        console.log(data)
        this.editList = data
      } catch (err) {
        this.$message.error('获取修改目录数据失败')
      }
    },
    // 修改目录
    async editListForm() {
      // 对表单进行校验
      this.$refs.editListRef.validate((valid) => {
        console.log(valid)
      })
      try {
        await update({
          id: this.editList.id,
          subjectID: this.editList.subjectID,
          directoryName: this.editList.directoryName
        })
        this.$message.success('修改目录成功')
        this.addDialogVisibles = false
        this.getList()
      } catch (err) {
        this.$message.error('修改目录数据失败')
      }
    },
    // 删除目录
    async removeDir(row) {
      const configRuselt = await this.$confirm(
        '此操作将永久删除该学科, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (configRuselt !== 'confirm') {
        return this.$message('您取消了删除操作!')
      }
      try {
        const { data } = await remove(row)
        console.log(data)
        this.$message.success('删除成功!')
        this.getList()
      } catch (err) {
        this.$message.error('删除失败!')
      }
    },
    // 点击切换状态
    async editState(row) {
      console.log(row)
      try {
        await changeState({
          id: row.id,
          state: row.state
        })
        row.state = row.state === 1 ? 0 : 1
        this.$message.success('切换状态成功')
      } catch (err) {
        this.$message.error('切换状态失败')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.elform {
  width: 300px;
}
</style>
